<template>
  <view class="diy-waterfall">
    <view class="bs-warter" v-for="(item, index) in dataList" :key="index" @click="toDetail(item)">
      <!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
      <u-lazy-load
          :threshold="lazyLoad.threshold"
          border-radius="10"
          :image="item.image"
          :index="index"
          :duration="lazyLoad.duration"
          :error-img="item.image"
      ></u-lazy-load>


      <view class="bs-title">
        {{ item.name }}
      </view>
      <view class="goods-price">
        <text class="price">￥{{ item.goods_price }}</text>
      </view>
      <view class="user-tag" v-if="item.tags">
        <u-tag v-for="(tag, indext) in item.tags" :key="indext" size="mini" :text="tag.text"
               :type="tag.type||'primary'"/>

      </view>
      <view class="bs-heart" @click.stop="like(item.item_id, item.is_collect)">
        <u-icon :name="item.is_collect?'heart-fill':'heart'" color="red" size="30"></u-icon>
      </view>

    </view>
  </view>
</template>
<script>
import goods_api from "@/common/goods_api";

export default {
  data() {
    return {
      dataItem: {
        item_id: 0,
        image: '',
        name: '',
        goods_price: ''
      }
    };
  },
  options: {},
  /**
   * 组件的属性列表
   * 用于组件自定义设置
   */
  props: {
    lazyLoad: {
      type: [Object, Array],
      default: function () {
        return {
          enable: true,
          duration: 300,
          threshold: 0
        };
      }
    },
    dataList: {
      type: [Array, Object],
      default: function () {
        return [];
      }
    }
  },
  methods: {
    like(goods_id,is_collect) {
      goods_api.collect({goods_id: goods_id})
          .then(res => {
            this.$u.toast(res.msg, 1000)
            if (res.code === 0){
              this.dataList.forEach(item => {
                if (item.item_id === goods_id) {
                  item.is_collect = !is_collect
                }
              })
            }
          })
    },
    toDetail(item) {
      console.log(item, '123')
      uni.navigateTo({
        url: '/pages/goods/detail?item_id=' + item.item_id
      })
    }
  },
  created: function () {
  }
};
</script>
<style lang="scss" scoped>
@import "./c_waterfall_item.scss";
</style>
